<template>
  <div>
    <video ref="videoPlayer" class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9"></video>
  </div>
</template>

<script>
import videojs from 'video.js';

export default {
  name: "VideoPlayer",
  props: {
    options: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      player: null
    }
  },
  mounted() {
    this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady(info) {
      console.log('onPlayerReady', this);
    })
    const _that = this;
    this.player.on('loadedmetadata', function() {
      try {
        const videoLength = this.player().cache_.duration;
        const videoLengthMintute = videoLength/60;
        console.log('视频时长(秒): ', videoLength);
        console.log('视频时长(分钟): ', videoLengthMintute);

        _that.duration(videoLength);
      } catch (e) {
      }
    })
    this.player.on('error', function() {
      console.log('视频加载错误..');
      _that.duration(-1);
    })
  },
  beforeDestroy() {
    console.log('播放器销毁..')
    if (this.player) {
      this.player.dispose()
    }
  },
  methods: {
    duration(duration) {
      this.$emit('duration', duration);
    }
  }
}
</script>
<style>
/*base code*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

/*the animation definition*/
@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    -ms-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

.video-js {
  background-color: #ffffff;
  margin-top: -10px;
}

</style>
